<template>
  <div class="roleDetail">
    <el-tabs v-if="false" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in tabMenu"
        :label="item.value"
        :name="item.key"
        :key="item.key"
      >
      </el-tab-pane>
    </el-tabs>
    <div v-loading="listLoading">
      <component
        @getInfo="getList"
        :is="activeName"
        :data="propsData"
      ></component>
    </div>
  </div>
</template>

<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { roleView } from '@/api/system/role'
import info from './info.vue'
@Component({
  name: 'roleDetail',
  components: {
    //引用的组件在这里声明
    info
  }
})
export default class extends Vue {
  @Prop({ default: '' }) private propExp1!: string
  // @Prop({ required: true }) private propExp2?: boolean
  private activeName: string = 'info'
  private listLoading: boolean = false
  private detailInfo: { [key: string]: any[] | any } = {
    info: {}
  }
  get id() {
    //computed 属性
    return this.$route.query['id']
  }
  get propsData() {
    let str: string = `${this.activeName}`
    return this.detailInfo[str]
  }
  created() {
    // 最早可以调用vue组件method的钩子
  }
  mounted() {
    this.getList()
    //mounted 钩子
  }
  private methodExp() {
    // method创建地方
  }
  private async getList() {
    this.listLoading = true
    // ajax 请求相应data
    try {
      const { data } = await roleView({ id: this.id })

      this.detailInfo.info = data
    } catch (error) {
      console.error(error)
    } finally {
      this.listLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.roleDetail {
  padding: 20px;
}
</style>
